* {
    margin: 0;
    padding: 0;
}

/* @font-face{
    font-family: "NeueHaasUnicaW06Regular";
    src: url("7250d52844cced73ed70675d1b78c60c.woff") format("woff");
    font-weight: normal;
    font-style: normal;
} */

@font-face{
    font-family: "Cordata";
    src: url("Web437_Cordata_PPC-400.woff") format("woff");
}

/* @font-face{
    font-family: "NeueHaasUnicaW06Italic";
    src: url("0aa6b2719638cacfa0e8abce9099a39b.woff") format("woff");
    font-weight: normal;
    font-style: italic;
} */

body {
    font-family: "Cordata";
    /* line-height: 1.4em; */
    font-size: 16px;
    line-height: 16px;
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    margin-right: 5px;
}

.logo {
    height: 70px;
    width: auto;
    padding-top: 5px;
}


.linkhover {
    position: absolute;
    display:flex;
    text-align: left;
    left: 80px;
    margin: 8px;
    margin-right: 8px;

    background: white;
    overflow: hidden;
    perspective: 400px;
    -webkit-perspective: 400px;
    perspective-origin: 50% 50%;
    -webkit-perspective-origin: 50% 50%;
    color:black;
    text-decoration: none;
}
.linkhover span {
    display: block;
    position: relative;
    transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
.linkhover:hover span {
    transform: translate3d( 0px, 0px, -20px ) rotateX( 90deg );
    -webkit-transform: translate3d( 0px, 0px, -20px ) rotateX( 90deg );
}
.linkhover span:after {
    content: attr(hover-title);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    color: white;
    /* background: red; */
    background-image: linear-gradient(black, #15b965);
    transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
    transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );
    -webkit-transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );
}


.linkhover2 {
    position: absolute;
    display:flex;
    text-align: left;
    left: 80px;
    margin: 8px;
    margin-right: 8px;

    background: white;
    overflow: hidden;
    perspective: 400px;
    -webkit-perspective: 400px;
    perspective-origin: 50% 50%;
    -webkit-perspective-origin: 50% 50%;
    color:black;
    text-decoration: none;
}
.linkhover2 span {
    display: block;
    position: relative;
    transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
.linkhover2:hover span {
    transform: translate3d( 0px, 0px, -20px ) rotateX( 90deg );
    -webkit-transform: translate3d( 0px, 0px, -20px ) rotateX( 90deg );
}
.linkhover2 span:after {
    content: attr(hover-title);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    color: white;
    /* background: red; */
    background-image: linear-gradient(red, #15b965);
    transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
    transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );
    -webkit-transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );
}




#info-section {
        /*position: fixed; */
    
    width: 100%; /* Full width of the screen */
    padding-top: 5px; /* Add some padding */
    right: 5px;
    box-sizing: border-box; /* Include padding in the width */
    /* background-color: white; /* Ensure it has a background */
    z-index: 2; /* Ensure it stays above other content */
    text-align: right;
}

.container {
    /*margin-top: -8px; /* Add space above the container */
    /* margin-right: 5px; */

    float: right;
    padding-left: 10px; /* Keep your existing padding */
    text-align: right; /* Keep your existing alignment */
    box-sizing: border-box; /* Include padding in the width */
    background-color: white; /* Ensure it has a background */
    z-index: 1; /* Ensure it stays below the INFO section */
    position: absolute;
    right: 5px;
}

.nav-row {
    display: flex;
    flex-direction: row-reverse;
    margin-right: 0px;
    text-align: right;
}

.nav-item {
    margin: 8px;
}
.nav-item:hover{
    color: forestgreen;
    font-weight: bold;
}

ul {
    list-style: none;
    margin: 0px;
}

.sub-list {
    display: flex; /* Always display the sublists */
    flex-direction: column;
    margin-bottom: 20px; /* Add some spacing between the sublists */
}

.sub-list a {
    text-align: right;
}

.sub-list.active {
    display: flex; /* This is redundant now since .sub-list is always visible */
}

.sublist-title {
    font-family: "Cordata";
    font-size: 16px;
    color: black;
    font-weight: normal;
    margin-top: 10px;
}

/* 
.sublist-title:hover {
    color: forestgreen;
}
*/

div.filter-options {
    margin-right: 0px;
    /* margin-top: 2px;
    margin-bottom: 16px; */
}

@media (max-width: 450px) {
    .filter-options {
        left: 60%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

label:not(:last-child) {
    margin-right: 8px;
}

.collapsible {
    position: relative;
    display: block;
    text-align: right;
    width: 100%;
    /* margin-bottom: 15px; */
}

.collapsible[style*="none"] {
    display: none; /* Hide elements that are filtered out */
}

.collapsible-name:hover {
    color: forestgreen;
}

.collapsible.active {
    text-align: right;
    width: 100%;
    color: green;
    height: 100%;
}

.collapsible-name {
    display: flex;
    flex-direction: row-reverse;
    cursor: pointer;
}

.date{
    width: 77px;
    min-width: 77px;
}

.upcoming {
    color: rgb(149, 149, 149)
}

.keyword span{
    background: linear-gradient(#15b965, #4d20e8); 
    color: #4d20e8; 
    letter-spacing: 4px;
    font-weight: bolder;
    font-style: normal;
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
}

.keyword:hover{
    display: inline-block;
    transform: rotate(180deg);

}

.keyword1 {
    display: inline-block;
    transform: skewY(7deg);
}

.keyword2 {
    display: inline-block;
    transform: skewY(-4deg);
}

.keyword3 {
    display: inline-block;
    transform: skewY(2deg);
}

.keyword4 {
    display: inline-block;
    transform: skewY(-6deg);
}

.keyword5 {
    display: inline-block;
    transform: skewY(1.5deg);
}

.keyword66 {
    display: inline-block;
    transform: skewY(10deg);
}

a.wavy {
    background: linear-gradient(#15b965, #4d20e8);
    color: #4d20e8;
    font-weight: bolder;
    background-clip: text;
    -webkit-background-clip: text; /* Safari */
    -webkit-text-fill-color: transparent;
  
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: #15b965; /* Explicit underline color */
  }


a.wavy:hover {
    display: inline-block;
    transform: rotate(180deg);
}

.show-title span {
    background: linear-gradient(#15b965, #4d20e8); 
    color: #4d20e8; 
    letter-spacing: 1.5px;
    font-weight: bold;
    font-style: normal;
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;

}

.show-title span {
    display: inline-block;
    
}

.show-title-upcoming span {
    background: linear-gradient(rgb(149, 149, 149), #4d20e8); 
    color: rgb(149, 149, 149); 
    letter-spacing: 1.5px;
    font-weight: bold;
    font-style: normal;
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;

}

.show-title-upcoming span {
    display: inline-block;
    
}

.upcomingcontent img {
    position : absolute;
    display: block;
    width: 80%;
    height: auto;
    z-index: 0;
}

/* .show-title {
    box-shadow: inset 0 0 0 0 #15b965;
    color: #54b3d6;
    margin: 0 -.25rem;
    padding: 0 .25rem;
    transition: color 2s ease-in-out, box-shadow 1s ease-in-out;
}

.show-title:hover{
    box-shadow: inset 200px 0 0 0 #00000000;
    color: white;
    display: inline-block;
    /* transform: rotate(180deg); */
    /* transform: skewY(3deg) !important; */
/*    span{
      transform: skewY(30deg) !important;
    }

} */




.show-name:hover{
    margin-top: -3px;
    transform: rotate(180deg);
    span{
      transform: skewY(0deg) !important;
    }

}


.cast{
    width: 170px;
    text-align: end;
}

.cast:hover{
    transform: rotate(180deg);
}

.stagna{
    width: 165px;

}

.stagna:hover{
    transform: rotate(180deg);
}

.thethird{
    width:210px;
}

.thethird:hover{
    transform: rotate(180deg);
}

.letthewhole{
    width:262px;
    text-align: justify;
}

.letthewhole:hover{
    transform: rotate(180deg);
    margin-top: -3px;
    text-align: justify;
}

.invernad{
    width: 120px;
}

.invernad:hover{
    transform: rotate(180deg);
    margin-top: -3px;
}

.howling{
    width: 140px;
}

.howling:hover{
    transform: rotate(180deg);
}

.crossplay {
    width: 270px;
}

.crossplay:hover {
    transform: rotate(180deg);
    margin-top: -3px;
}

.common {
    width: 240px;
}

.common2 {
    width: 180px;
}

.common:hover {
    transform: rotate(180deg);
    margin-top: -3px;
}

.common2:hover {
    transform: rotate(180deg);
    margin-top: -3px;
}


.mocking {
    width:120px;
}

.mocking:hover {
    transform: rotate(180deg);
    margin-top: -1px;
}

.hund {
    width:160px;
    text-align: justify;
}

.hund:hover {
    transform: rotate(180deg);
    margin-top: -1px;
}

.zero {
    width:145px;
    text-align: justify;
}

.zero:hover {
    transform: rotate(180deg);
    margin-top: -1px;
}

.thelens {
    width:245px;
    text-align:end;
}

.thelens:hover {
    transform: rotate(180deg);
    margin-top: -1px;
}

.setting-suns {
    width:345px;
    text-align: end;
}

.setting-suns:hover {
    transform: rotate(180deg);
    margin-top: -1px;
}

.content {
    display: none;
    overflow: hidden;
    margin-right: 77px;
    transition: max-height 0.3s ease-out;
    color: black;
}

.imgcontent {
    display: inline-block;
    justify-content: right;
    flex-direction: column;
    right: 0px;
    max-width: 50%;
    margin-left: 8px; 
    margin-left: 20%;
    margin-bottom: 0px;
}

.collapsible.active .content {
    display: inline-block;
    margin-bottom: 7px;
    transition: max-height 0.3s ease-out;
    margin-top: -2px;
}

.thumbnail-gallery {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    margin-bottom: -8px;
    margin-top: 5px;
}

.thumbnail {
    overflow: hidden;
    width: 50px;
    height: 50px;
    margin-left: 8px;
    margin-bottom: 8px;
    cursor: pointer;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24); 
}

.thumbnail.active img.active {
    filter: invert(1);
    border-style: solid;
    border-width: 1px;
    border-color: black;
    transform: scale(0.95); 
    border-radius: 30px;
}

.thumbnail img:hover {
    filter: invert(1);
}

/* Updated: Thumbnail Collapsible Styles */
.thumbnail-collapsible {
    display: none; /* Hidden by default */
    position: relative; /* Ensure it stays within the flow of the document */
    z-index: 9999; /* Ensure it appears above other content */
    background: white; /* Add a background to make it visible */
    overflow: hidden; /* Prevent content from overflowing */
    min-height: 200px; /* Ensure it has a minimum height */
}

.thumbnail-collapsible.active {
    display: block; /* Show when active */
}

.opened-thumbnail-collapsible-wide {
    /* Position the content on the right side of the left half of the screen */
    position: fixed;
    top: 25px; /* Adjust as needed */
    left: 46%; /* Move it to the middle of the screen */
    transform: translateX(-100%); /* Move it back to the left by half of its own width */
    /* width: 40%; /* Set width to occupy half of the screen */
    width: auto;
    max-width: 40%;
    max-height: 94%;
    overflow-y: auto; /* Allow vertical scrolling if content exceeds height */
    /* background-color: #fff; */

    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); */
    /* box-shadow: 0px 0px 18px 14px white, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; */
    /* box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px; */
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; */
    box-shadow:0px 0px 10px 8px rgba(255, 255, 255, 0.70), rgba(0, 0, 0, 0.5) 0px 22px 70px -4px;
    z-index: 9999;
    background-color: white;

}

@media (max-width: 900px) {
    .thumbnail-collapsible img {
        max-width: 100%;
        margin-top: 8px;
        margin-left: 8px;
    
        max-height: 80%;
        background-color: white;
    }
  }

.opened-thumbnail-collapsible-wide img {
    max-width: 100%;
    max-height: 650px;
}

.legend {
    margin-top: -4px;
    margin-bottom: 0px;
    font-size: 12px;
    line-height: 1.2em;
    background-color: white;
    width: auto;
    text-align: right;
    justify-content: right;
}

p.title {
    font-style: italic;
    display: inline;
    line-height: 1.2em;
}

/* Style for text-container */
.text-container {
    display: none;
}

/* Style for text-container when collapsible is active */
.collapsible.active .text-container {
    display:flex;
    position:fixed;
    top: -5px;
    left: 50%;
    transform: translateX(-100%);
    padding: 20px;
    max-width: 800px;
    z-index: 9999;
    font-size: 25px;
    line-height: 1.1em;
    color: black;
    overflow-y: auto;
    max-height: 99%;
}

.collapsible.active .text-content {
    /* margin-top: 12vh; */
    margin-top: 8%; 
}

@media (max-width: 1100px) {
    .collapsible.active .text-container {
        display: none;
    }
}

.checkbox {
    background-color: white;
    width: 16px;
    height: 15px;
    border: 2.6px solid black;
    margin-top: 3px;
    margin-left: 95.4%;
}

.multiple-choice p {
    margin-right: 50px;
    margin-top: -24px;
}

sup {
    font-size: 14px;
    line-height: 1em;
}

.sup2 {
    font-size: 10px;
    line-height: 1em;
}

.footnotes {
    font-size: 14px;
    line-height: 1.2em;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.num {
    display: inline;
    flex-direction: row-reverse;
}

.footnotes2 {
    font-size: 14px;
    line-height: 1.2em;
    flex-direction: row-reverse;
    display: flex;
}

.italic {
    font-style: italic;
}

.italic2 {
    font-style: italic;
    font-size: 14px;
    line-height: 1.2em;
    margin-left: 35%;
}

.italic3 {
    font-style: italic;
    font-size: 14px;
    line-height: 1.2em;
}


span.italic2 {
    display: block;
    line-height: 1.2em;
}

.note-container {
    direction: rtl;
    text-align: justify;
    font-size: 14px;
    line-height: 1.2em;
}

.note {
    text-align: right;
    margin-bottom: 10px; /* Adjust spacing between notes as needed */
    position: relative;
}

.note2 {
    text-indent: 30px;
}

.note::before {
    content: attr(data-note-number) ".";
    position: absolute;
    top: 0;
    right: 0;
    margin-left: 10px; /* Adjust spacing between line number and text as needed */
}

.language-switch {
    padding: 3px;
    background-color: transparent;
    color: green;
    border: 1px solid white;
    border-radius: 18px;
    cursor: pointer;
    position: fixed !important;
    left: 1%;
    font-size: 25px;
    margin-top: 20%;
    z-index: 100;
}

.language-switch:hover {
    background-color: #b8babc;
}

.language-switch:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5); /* Example box shadow for focus */
}

/* Splash Screen */
#splash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 2s ease, visibility 0s linear 2s;
  }
  
  #splash img {
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
    cursor: pointer;
  }
  
  /* Fade-out class */
  #splash.fade-out {
    opacity: 0;
    /* visibility: hidden;
    pointer-events: none; */
  }


  #rotateMsg {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #000;
    color: #fff;
    font-size: 1.5rem;
    line-height: 30px;
    z-index: 9999;
    justify-content: center;
    align-items: center;
    text-align: center;
  }